<template>
  <dialog-father v-if="value"
                 @clickModal="closeDialog">
    <transition mode="in-out"
                appear
                leave-active-class="animated fadeOutDown"
                enter-active-class="animated fadeInUp">
      <div class="buy-picker"
           v-if="showSub">
        <div class="buy-picker__header">
          <img class="buy-picker__header__product"
               :src="detailData.img">
          <span class="buy-picker__header__price">{{titlePrice | math-mul(detailData.discount) | math-round(2,1) |math-money}}</span>
          <div class="close-out"
               @click.stop="closeDialog">
            <div class="close">
              <a/>
            </div>
          </div>
        </div>
        <div class="buy-picker__diving"></div>
        <div class="buy-picker__list">
          <div class="buy-picker__list__per"
               v-for="(item, index) in detailData.skuList">
            <div class="quantity">{{item.psname}}</div>
            <div class="num">
              <edit-choose minValue="0"
                           :nvalue.sync="detailData.skuList[index].buyCount"
                           @inputChange="inputChange"
                           :index="index"
                           maxValue="99999"></edit-choose>
            </div>
          </div>
        </div>
        <div class="buy-picker__diving"></div>
        <div class="buy-picker__total">
          <span>共{{countTotal}}{{detailData.skuList[0].pdunit}}</span>
          <span>{{priceTotal| math-mul(detailData.discount) | math-round(2,1) | math-money}}</span>
        </div>
        <div class="buy-picker__bottom">
          <button v-on:click="clickButton(type - '0') "
                  class="btn__n"
                  :style="getButtonStyle()">{{type - '0' === 0 ? '加入购物车' : '立即订购'}}</button>

        </div>
      </div>
    </transition>
  </dialog-father>
</template>

<script>
import dialogFather from '@/components/common-pages/dialog-father'
import editChoose from '@/components/common-pages/edit-choose'
import {calc} from '@/_util'
export default {
  name: 'buy-picker',

  data () {
    return {
      visibles: false, // 显示
      priceTotal: 0, // 总价格
      countTotal: 0,
      unit: '',
      showSub: false,
      titlePrice: 0
    }
  },
  props: {
    value: {
      default: false,
      type: Boolean
    },
    detailData: {
      type: Object,
      defaul () {
        return {}
      }
    },
    type: Number // 0: 加入进货单，1：立即订购，2：两个都有
  },
  watch: {
    value (value) {
      if (value) {
        this.showSub = true
        for (let i = 0; i < this.detailData.skuList.length; i++) {
          this.detailData.skuList[i].buyCount = 0
        }
      }
    },
    showSub (value) {
      if (!value) {
        setTimeout(() => {
          this.$emit('input', false)
        }, 800)
      }
    }
  },
  methods: {
    inputChange (index) {
      let count = 0
      let price = 0
      for (let i = 0; i < this.detailData.skuList.length; i++) {
        let countPer = parseInt(this.detailData.skuList[i].buyCount || '0')
        count += countPer
        let perPrice = calc(countPer).mul(this.detailData.skuList[i].psprice).over()
        price = calc(price).add(perPrice).over()
      }
      this.priceTotal = price
      this.countTotal = count
      this.titlePrice = this.detailData.skuList[index].psprice
    },
    // 获取底部按钮的样式，显示 加入购物车 和 立刻订购按钮的样式
    getButtonStyle () {
      if (this.type === 2) {
        return {
          width: 350 / 100 + 'rem',
          height: 74 / 100 + 'rem',
          borderRadius: 12 / 100 + 'rem'
        }
      } else {
        return {
          width: 700 / 100 + 'rem',
          height: 74 / 100 + 'rem',
          borderRadius: 12 / 100 + 'rem'
        }
      }
    },
    getButtonWidth: function () {
      if (this.type === 2) return 350 / 75 + 'rem'
    },
    closeDialog () {
      this.showSub = false
    },
    // 标题的 价格
    getTitlePrice: function () {
    },
    createOrder: function () {
      let tempArr = []
      for (let i = 0; i < this.detailData.skuList.length; i++) {
        let skuPer = this.detailData.skuList[i]
        // 如果购买的数量大于1
        if (skuPer.buyCount - '0' > 0) {
          let tempObj = {
            psid: skuPer.psid,
            cartnumber: parseInt(skuPer.buyCount)
          }
          tempArr.push(tempObj)
        }
      }
      return tempArr
    },
    clickButton: async function (index) {
      let tempArr = this.createOrder()
      if (tempArr.length <= 0) {
        this.$toast('请选择商品')
        return
      }
      // 加入购物车
      if (index === 0) {
        try {
          let addToCart = await this.$ajax.post('/tCart/addToCart.json', tempArr)
          if (addToCart.result - '0' > 0) {
            this.closeDialog()
            this.$toast('添加成功')
          }
        } catch (e) {
          this.$toast(e)
        }
      } else {
        // 立即购买
        this.$router.push({name: 'confirm-order', query: { list: JSON.stringify(tempArr) }})
        // await this.$ajax.post('/tOrder/addOrder.json', {
        //   paytype: '0',
        //   addid: '08e6267e70dc4b6288dfc3abfda3755c',
        //   list: tempArr
        // })
      }
    }
  },
  mounted () {
  },
  components: {
    dialogFather,
    editChoose
  }
}
</script>
<style lang="stylus" scoped>
.btn__n {
  // height: 74px;
}

.dialog-father {
  align-items: flex-end !important;
}

.buy-picker {
  width: 100%;
  background: white;
  display: flex;
  // justify-content: center;
  flex-direction: column;
  align-items: bottom;
  // height: 200px;
  border-radius: 10px;

  .buy-picker__diving {
    width: 100%;
    height: 1px;
    background: #e6e6e6;
  }

  .buy-picker__bottom {
    width: 100%;
    display: flex;
    justify-content: center;
    // margin-top: 11px;
    margin-bottom: 13px;
  }

  .buy-picker__header {
    position: relative;

    .buy-picker__header__product {
      width: 140px;
      height: 140px;
      margin-top: -30px;
      margin-left: 20px;
    }

    .buy-picker__header__price {
      margin-bottom: 42px;
      margin-left: 30px;
      color: #e13045;
      position: absolute;
      top: 28px;
      font-size: 34px;
    }

    .close-out {
      position: absolute;
      top: 27px;
      right: 24px;
      display: flex;

      .close {
        width: 66px;
        height: 66px;
        border-radius: 100px;
        background: white;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;

        a {
          display: inline-block;
          width: 35px;
          height: 3px;
          background: black;
          line-height: 0;
          font-size: 0;
          -webkit-transform: rotate(45deg);
          position: absolute;
        }

        a:after {
          content: '/';
          display: block;
          width: 35px;
          height: 3px;
          background: black;
          -webkit-transform: rotate(-90deg);
        }
      }
    }
  }

  .buy-picker__total {
    font-size: 30px;
    color: #e31436;
    text-align: right;
    margin-top: 15px;
    margin-bottom: 23px;

    span {
      margin-right: 20px;
    }
  }

  .buy-picker__list {
    .buy-picker__list__per {
      height: 98px;
      padding-left: 35px;
      padding-right: 20px;
      box-sizing: border-box;
      display: flex;
      align-items: center;

      .quantity {
        font-size: 28px;
        color: rgba(51, 51, 51, 1);
      }

      .num {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        font-size: 28px;
        color: rgba(51, 51, 51, 1);
      }
    }
  }
}
</style>
